<style>
  .header_fa{
    width: 300px;
    height: 100%;
  }
  .logo img{
    cursor:pointer;
  }
  .user_img{
    position: relative;
  }
  .user_img div{
    position: absolute;
    top:60px;
    right: 115px;
    z-index:999;
    width: 80px;
    background: #ddd;
    opacity:.9;
    display: none;
  }
  ul
  {
    list-style-type:none;
    margin:0;
    padding:0;
  }
  .user_img>img{
    cursor:pointer;
  }
  .user_img li{
    line-height: 40px;
    cursor:pointer;
  }
  .user_img li:hover{
    background:#3AB4FF ;
  }
  .user_img:hover div{
    display: block;
  }
  .user_content>div>span,.user_content>div>div{
    display:inline-block;
  }
</style>
<template>
  <div>
    <Menu mode="horizontal" active-name="1">
      <!--<div class="layout-assistant">
        <MenuItem name="1">一级导航</MenuItem>
        <MenuItem name="2">二级导航</MenuItem>
        <MenuItem name="3">三级导航</MenuItem>
      </div>-->
      <div style="float: left">
        <div class="header_fa">
          <div class="logo"><img src="../../images/logo.png" alt="" width="50" @click="goIndex"></div>
        </div>
      </div>
      <div style="float: right">
        <div class="header_fa">
          <div class="user_img">
            <img src="../../images/鲸鱼.png" alt="" width="50">
            <div>
              <ul>
                <li @click="setUserInformation = true"><span>设置</span></li>
                <li @click="returnLoginPage"><span>注销</span></li>
                <li><span>XXX</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </Menu>
    <Modal
      v-model="setUserInformation"
      title="编辑个人信息"
      :loading="loading"
      @on-ok="asyncOK">
      <div class="user_content">
        <div><span style="width: 40px">姓名</span><div><Input></Input></div></div>
        <div><span style="width: 40px">性别</span><div><Input></Input></div></div>
        <div><span style="width: 40px">身份证</span><div><Input></Input></div></div>
        <div><span style="width: 40px">家乡</span><div><Input></Input></div></div>
        <div><span style="width: 40px">现居地</span><div><Input></Input></div></div>
        <div><span style="width: 40px">学校</span><div><Input></Input></div></div>
        <div><span style="width: 40px">手机号码</span><div><Input></Input></div></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  export default{

    data(){
      return{
        userId:'',
        username:'',
        setUserInformation: false,
        loading: true
      }
    },
    methods:{
      asyncOK () {
        setTimeout(() => {
          this.$Message.success({
            content:'提交成功'
          })
          this.setUserInformation = false;

        }, 2000);
      },
      returnLoginPage(){
        setTimeout(()=>{
          this.$Message.success({
            content:'注销成功'
          })
          this.$router.push({
            name:'login'
          })
        },2000)
      },
      goIndex(){
        setTimeout(()=>{
          this.$router.push({
            name:'login'
          })
        },1000)
      }
    }
  }
</script>
